import { reqSide } from "../http/http"
// 1.安装 npm i  vuex --save
//2.引入 vuex
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

// 3.创建仓库
let store = new Vuex.Store({
    //仓库中的数据
    //4.1state：状态
    state: {

        bannerArr: []
    },
    getters: {
        bannerArr(state) {
            return state.bannerArr
        },
    },
    //仓库中的方法
    //4.2 mutations:直接修改state
    mutations: {
        //mutations的函数的第1个形参就是当前仓库的state,
        // 第2个参数才是你自己的参数
        //修改banner
        changeBanner(state, arr) {
            state.bannerArr = arr;
        }
    },
    //4.3actions :动作|任务
    // 异步
    actions: {

        //发请求请求banner
        reqBannerAction(context) {
            reqSide().then(res => {
                //修改banner
                context.commit("changeBanner", res.data.list)
            })
        }
    }
})

/*
mutations VS actions
mutations:同步       可以直接修改state       $store.commit()    回调函数的第1个参数是当前仓库的数据(state)  作用：修改state
actions : 异步+同步  通过mutations修改state  $store.dispatch()  回调函数的第1个参数是当前仓库本身(context)) 作用：做业务逻辑

*/
// Vuex单向数据流
// state--（render）->组件--(dispatch)--->actions---(commit)->mutations--(mutate[修改])->state--render-->组件

// v-model 双向数据绑定，表单的数据更推荐v-model


// 4.导出仓库
export default store